<!--
注意:
node_modules 依赖文件需要通过 npm install 进行安装
-->

<!--
页面结构模块
-->
<template>
  <p>父组件</p>
  <div id="app">
    myVar={{ myVar }} ;
    valB={{ valB }} ;
    valC={{ valC }} ;
  </div>
  <br/>

  <p>子组件1</p>
  <div>
    <!--
    fatherFunc 是定义在子组件中的通知父组件的函数
    这么做的目的就是为了让数据可观察性更强，可维护性更高，有一个更清晰的清单
    (父组件一个变量的修改,只需要在父组件页面就可以观测到,不需要深入过多子组件)
    -->
    <HelloWorld @fatherFunc="sumNum" :val-c="valC"></HelloWorld>
  </div>
  <br/>

  <p>子组件2</p>
  <!-- 3.使用组件 -->
  <!-- 注意: 组件引入后必须使用 -->
  <div>
    <!-- 每个组件(components)数据都是隔离的 -->
    <!--
     vue提供了一个props的入口，也是父子组件之间唯一的传值方式，
    父组件通过v-bind自定义属性传入值，
    子组件通过props接受对应的参数

    公共v-bind自定义属性传值，注意由于vue的属性对大小写不敏感，
    所以如果需要写驼峰命名，需要使用-隔开
     -->
    <HelloWorld :father-val="myVar" :val-b="valB" :val-c="valC"></HelloWorld>
  </div>
  <br/>
</template>

<!--
交互逻辑模块
-->
<script>

// 1.引入组件
import HelloWorld from './components/HelloWorld.vue'

export default {
  // 2.注册组件
  components: {
    HelloWorld
  },
  data() {
    //通过 return 每次返回新对象(多例,避免变量冲突)
    return {
      myVar: "自定义变量",
      valB: 99,
      valC: 188
    }

  },
  methods: {
    sumNum() {
      this.valB++
      console.log()
    }
  }
}
</script>

<!--
样式模块
-->
<style>

</style>
